<template>
  <div class="bottom">
    <h1 class="logoArea">
      <router-link class="logo" title="尚品汇" to="/home">
        <img src="./images/logo.png" alt="" />
      </router-link>
    </h1>
    <div class="searchArea">
      <form action="###" class="searchForm">
        <input
          type="text"
          id="autocomplete"
          class="input-error input-xxlarge"
          v-model="keyword"
        />
        <button
          class="sui-btn btn-xlarge btn-danger"
          type="button"
          @click="searchMsg"
        >
          搜索
        </button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
    };
  },
  beforeMount() {
    this.$bus.$on('clearKeyword',()=>{this.keyword =''})
  },
  methods: {
    searchMsg() {
      let location = {
        name: "search",
        params: {
          keyword: this.keyword || undefined,
        },
      };
      if (this.$route.query.categoryName) {
        location.query = this.$route.query
      }
      if(this.$route.path !== '/home') {
        this.$router.replace(location)
      }else {
        this.$router.push(location);
      }
    },
  },
};
</script>

<style>
</style>